<style scoped>
.top_warp {
  display: flex;
  height: 50px;
  /* background-color: #282b33; */
  background-color: #323639;
  /* background-color: #5643AA; */
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  -webkit-app-region: drag;
  /* background-image: linear-gradient(to right, #5643AA,#8E48AE, #CB4EB2); */
  /* background-image: url('../assets/img/top_bg.png'); */
}

.left_wrap {
  /* width: 200px; */
  width: 200px;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  /* padding: 10px; */
  /* padding-top: 10px; */
  background-color: #fff;
  border-right: 1px solid rgb(219, 221, 226);
  overflow-y: auto;
  /* box-shadow: 1px 0px 2px 0 #0000001a; */
  /* -webkit-box-shadow: 1px 0px 6px 0 #0000001a; */
  z-index: 200;
  overflow-x: hidden;

  -webkit-box-shadow: 1px 0 4px 0 rgb(0 0 0 / 10%);
    box-shadow: 1px 0 4px 0 rgb(0 0 0 / 10%);
}
.right_wrap {
  background-color: #fff;
  position: relative;
  margin-left: 200px;
  top: 50px;
}
.logo {
  font-size: 16px;
  /* font-weight: 600; */
  color: #fff;
  /* margin-left: 20px; */
  width: 600px;
  display: flex;
  align-items: center;
}
.tool {
    margin-right: 20px;
    color: #fff;
    display: flex;
    align-items: center;
}
.top_menus{
    color:#707681;
    margin-left:15px;
    padding:5px;
    border-radius: 3px;
    cursor: pointer;
    -webkit-app-region: no-drag;
}
.top_menus:hover{
    background-color: #D6D7D9;
}

.left_wrap li{
  list-style: none;
  font-size: 13px;
  height:38px;
  text-align: center;
  cursor: pointer;
  padding:5px 5px 5px 15px;
  display: flex;
  align-items: center;
}
.left_wrap li:hover{
  color:#5e7ce0;
}
.top_tools{
  display: flex;
  justify-content: center;
  margin-right:20px;
  color:#fff;
  height:26px;
  align-items: center;
}
.top_tools_menu{
  /* color:#707681; */
  color:#F1F1F1;
  margin-left:15px;
  padding:5px;
  border-radius: 2px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  font-size:16px;
  justify-content: center;
  height:18px;
}
.top_tools_menu:hover{
    /* background-color: #D6D7D9; */
    background-color: #191B1C;
}

.modules-sep-line-cf-header-sep-line {
    width: 1px;
    height:26px;
    border-right: 1px solid #53555c;
}

.logout{
  margin-left:20px;
  cursor: pointer;
}

.copyright{
  text-align: center;
  font-size: 12px;
  position:fixed;
  bottom: 0;
  width:100%;
  height:18px;
  color:#777777;
  background-color: #f5f7fa;
  padding-top:4px;
}
</style>
<template>
  <div class="page_wrap">
    <div class="top_warp">
      <div style="display: flex;align-items: center;width:200px;">
        <!-- <iconpark-icon name="application-one" style="color:#fff;font-size:22px;font-weight:600;margin-left:20px;padding-top:3px;"></iconpark-icon> -->
        <div style="margin-left:5px;color:#fff;display:flex;align-items: center;">
          <!-- <img src="../assets/img/logo.png" style="width:30px;margin-left:30px;" />
          <img src="../assets/img/logo2.png" style="width:80px;margin-left:10px;" /> -->
          <span style="margin-left:10px;font-size:16px;">UAP统一认证平台</span>
          <!-- <span style="margin-left:5px;">v1.0</span> -->
        </div>
      </div>
      <div class="top_tools">
        
        <span class="logout" @click="logout">注销登录</span>
      </div>
    </div>
    <div class="left_wrap">
      <template v-for="item in leftMenus" >
            <li  v-bind:key="item.id" @click="menuChange(item.id)" :style="item.checked?'color:#5e7ce0;background-color: #E1EAF8;border-left:2px solid #526ecc;':'padding-left:17px'">
                <!-- <iconpark-icon style="font-size:14px;" :name="item.icon"></iconpark-icon> -->
                <i :class="item.icon" style="font-size:14px;"></i>
                <span style="margin-left:5px;">{{item.title}}</span>
            </li>
      </template>
    </div>
    <div class="right_wrap">
      <router-view></router-view>
    </div>

    <!-- <div class="copyright">
      Copyright © 2023 heckman.cn All Rights Reserved 
    </div> -->
  </div>
</template>
<script>
export default {
  name:'home',
  data(){
    return{
      mix: false,
      leftMenus:[
        {
          id:0,
          title:'控制首页',
          // icon:'home-950bfkej',
          icon:'el-icon-s-home',
          checked:true,
          url:'/home/index'
        },
        {
          id:1,
          title:'应用管理',
          icon:'el-icon-s-tools',
          checked:false,
          url:'/home/app'
        },
        {
          id:2,
          title:'用户管理',
          icon:'el-icon-s-flag',
          checked:false,
          url:'/home/user'
        },
        {
          id:3,
          title:'机器人管理',
          icon:'el-icon-s-flag',
          checked:false,
          url:'/home/robot'
        },
      
        
      ],
      version:{}
    }
  },
  mounted(){
    this.loadVersion();
    var nowUrl = this.$router.currentRoute.path
    this.leftMenus.forEach(function(v){
      if(v.url==nowUrl){
        v.checked = true;
      }else{
        v.checked = false;
      }
    });
  },
  methods:{
    loadVersion(){
      this.$http.get('/api/version').then(({
            data: res
        }) => {
            if (res.code !== 0) {
                return this.$message.error(res.msg)
            }
            this.version = res.data;
        }).catch(() => {})
    },
    menuChange(id){
      var url = '';
      this.leftMenus.forEach(function(v){
        if(id==v.id){
          v.checked = true;
          url = v.url;
        }else{
          v.checked = false;
        }
      });
      this.$router.push(url);
    },
    logout(){
      this.$confirm('是否注销登录?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token');
        this.$router.push('/')
      }).catch(() => {
           
      });
    }
  }
}
</script>